<template>
  <div class="app-container">
    <div v-if="type === 0">
      <el-row >
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="企业名称" prop="enterpriseName" >
              <el-input v-model="queryParams.enterpriseName" placeholder="请输入企业名称" clearable
                @keyup.enter.native="handleQuery"  style="width: 200rem;"/>
            </el-form-item>
            <el-form-item label="联系人" prop="contacts" >
              <el-input v-model="queryParams.contacts" placeholder="请输入联系人" clearable
                        @keyup.enter.native="handleQuery"  style="width: 200rem;"/>
            </el-form-item>
            <el-form-item label="联系电话" prop="telephone" >
              <el-input v-model="queryParams.telephone" placeholder="请输入联系电话" clearable
                        @keyup.enter.native="handleQuery"  style="width: 200rem;"/>
            </el-form-item>
<!--            <el-form-item label="企业性质" prop="enterpriseNature">-->
<!--              <el-select v-model="queryParams.enterpriseNature" placeholder="请选择企业性质" clearable style="width:150px">-->
<!--                <el-option v-for="dict in dict.type.enterprise_nature" :key="dict.value" :label="dict.label"-->
<!--                  :value="dict.value" />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
            <el-form-item size="mini" label="所属园区" prop="parkName"  >
              <el-select style="width: 200rem;" v-model="queryParams.parkName" placeholder="请选择所属园区">
                <el-option v-for="dict in dict.type.belong_to_park" :key="dict.value" :label="dict.label" :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="行政区域" prop="administrativeArea" size="mini" >
              <Treeselect
                v-model="queryParams.administrativeArea" :options="options" :flat="true" style="width: 200rem;" :show-count="true" :normalizer="normalizer" placeholder="请选择行政区域" class="tree-select" />
            </el-form-item>
<!--            <el-form-item label="所属行业" prop="industry"  size="mini">-->
<!--              -->
<!--            </el-form-item>-->
            <el-form-item label="信息来源" prop="infoSource" >
<!--              <el-input v-model="queryParams.infoSource" placeholder="请输入信息来源" clearable-->
<!--                        @keyup.enter.native="handleQuery"  style="width: 200rem;"/>-->
              <el-autocomplete
                v-model="queryParams.infoSource"
                :fetch-suggestions="querySearch"
                placeholder="请输入信息来源"
                clearable
                @select="handleSelect"
                @keyup.enter.native="handleQuery"
                style="width: 200rem;"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <div class="search-row manager-row">
              <el-form-item
                size="mini"
                label="快速搜索"
                prop="administrativeArea"
              >
                <div class="manager-tags">
      <span
        v-for="manager in managerList"
        :key="manager.keyId"
        :class="['manager-tag', queryParams.administrativeArea === manager.keyId ? 'active' : '']"
        @click="handleManagerSelect(manager)"
      >
        {{ manager.value }}
      </span>
                </div>
              </el-form-item>
            </div>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
<!--            <el-col :span="1.5">-->
<!--              <el-button type="primary" plain size="mini" :disabled="multiple"-->
<!--                @click="handleUpdateClass">修改主分类</el-button>-->
<!--              <el-col :span="1.5">-->
<!--                <el-button type="primary" plain icon="el-icon-edit" size="mini" :disabled="single"-->
<!--                  @click="editBusinessManager">修改业务经理</el-button>-->
<!--              </el-col>-->
<!--            </el-col>-->
            <el-col :span="1.5">
              <el-col :span="1.5">
                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
              </el-col>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openEnterprise">企业信息查询</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning" plain icon="el-icon-plus" size="mini" @click="openElectric">转线索</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning"  plain icon="el-icon-download" size="mini" @click="handleExport"  v-if="isAdminPrivate==1">导出</el-button
              >
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
          </el-row>
          <dia v-if="innerVisible" @close-dialog="handleDialogClose" :innerVisible.sync="innerVisible" />



          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-dialog :visible.sync="dialogVisiblePdf" append-to-body>
            <pdf v-for="item in pageTotal" :src="pdfUrl" :key="item" :page="item"></pdf>
          </el-dialog>
        <div style="width: 100%;height: 90vh;overflow:auto; margin-bottom: 30%;padding-bottom: 18%;position: relative;">
          <el-table :row-style="{ height: '30px' }" :cell-style="{ padding: '0px' }" height="500" size="mini"  :header-cell-style="{'text-align':'center'}" border
            v-loading="loading" :data="seasList" @selection-change="handleSelectionChange"
            :row-class-name="tableRowClassName"  highlight-current-row>
<!--            @row-click="handleCurrentChange"-->
            <el-table-column type="selection" align="center" width="30"/>
            <el-table-column label="序" type="index" :index="indexMethod" width="35"/>
            <el-table-column label="创建时间" align="center" prop="creationTime" width="85" v-if="columns[0].visible"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.creationTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="userName" v-if="columns[16].visible" :show-overflow-tooltip="true" width="60"/>
              <el-table-column label="企业名称"  prop="enterpriseName" v-if="columns[3].visible"
                               :show-overflow-tooltip="true" width="200" align="left" />
              <el-table-column label="成立日期" align="center" prop="establishmentDate" width="85" v-if="columns[12].visible"
                               :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.establishmentDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
            <el-table-column label="更新时间" align="center" prop="followTime"  v-if="columns[1].visible" width="85">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.followTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
              <el-table-column label="注册资金" align="center" prop="registeredCapital" v-if="columns[13].visible"
                               :show-overflow-tooltip="true"  width="80">
                <template slot-scope="scope">
                  <span>{{scope.row.registeredCapital}}万元</span>
                </template>
              </el-table-column>
              <el-table-column label="联系人" align="center" prop="contacts" v-if="columns[5].visible" width="60"
                               :show-overflow-tooltip="true" />
              <el-table-column label="联系电话" align="center" prop="telephone" v-if="columns[6].visible" width="100"
                               :show-overflow-tooltip="true" />
            <el-table-column label="行政区域" align="center" prop="areaName" v-if="columns[7].visible"
                             :show-overflow-tooltip="true" width="80"/>
            <el-table-column label="所属园区" align="center" prop="parkName" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                              <dict-tag :options="dict.type.belong_to_park" :value="scope.row.parkName" />
                            </template>
            </el-table-column>
            <el-table-column label="信息来源" align="center" prop="infoSource" :show-overflow-tooltip="true"/>
<!--            <el-table-column label="最新进展" align="center" prop="lastRecord" :show-overflow-tooltip="true" width="220"-->
<!--                             v-if="columns[0].visible" />-->
<!--            <el-table-column label="公司编号" align="center" prop="companyNo" v-if="columns[4].visible"-->
<!--              :show-overflow-tooltip="true" width="120" />-->
<!--            <el-table-column label="企业性质" align="center" prop="enterpriseNature" v-if="columns[8].visible"-->
<!--              :show-overflow-tooltip="true">-->

<!--              <template slot-scope="scope">-->
<!--                <dict-tag :options="dict.type.enterprise_nature" :value="scope.row.enterpriseNature" />-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="开户银行" align="center" prop="accountBank" v-if="columns[10].visible"-->
<!--              :show-overflow-tooltip="true" />-->
<!--            <el-table-column label="开户账号" align="center" prop="account" v-if="columns[17].visible"-->
<!--                             :show-overflow-tooltip="true"/>-->
<!--            <el-table-column label="税务号" align="center" prop="taxId" v-if="columns[11].visible"-->
<!--              :show-overflow-tooltip="true" />-->
<!--            <el-table-column label="状态" align="center" prop="status" v-if="columns[14].visible"-->
<!--              :show-overflow-tooltip="true">-->
<!--              <template slot-scope="scope">-->
<!--                <dict-tag :options="dict.type.seas_status" :value="scope.row.status" />-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="附件" align="center" prop="uploadFile" v-if="columns[15].visible">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button    v-if="scope.row.url!=null"   @click.stop="queryUploadFile(scope.row.businessLicense)" size="small"-->
<!--                  type="text">附件</el-button>-->
<!--                <el-button size="small" v-else type="text">无附件</el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="80">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit"
                  @click.stop="handleUpdate(scope.row, scope.$index)" title="编辑"></el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" title="删除"></el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </el-row>
      <el-row>
        <div v-if="open">
          <el-row>
            <el-col :span="24">
              <Add @change="close" :opt="'select'" :id="id" :index="index" ref="operateref"></Add>
            </el-col>
          </el-row>
        </div>
      </el-row>
    </div>
    <!-- 公海导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
            @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!--    公海导入对话框结束-->
    <div v-if="type == 1">
      <Add @change="close" :opt="opt" :id="id" :index="index" :classificationId="queryParams.classificationId" ></Add>
    </div>
    <el-dialog title="修改主分类" :visible.sync="classOpen" width="20%" style="height:1000px">
      <treeselect v-model="classificationIds" :options="options" placeholder="请选择主分类" v-if="opd != 'details'"
        style="width: 202.5px" :disabled="ReadOnly" />
      <el-input v-else v-model="form.label" placeholder="主分类" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClass">确 定</el-button>
        <el-button @click="classOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
    <select-user ref="select" :type="userType" :sign="sign" @ok="selectUser"></select-user>
    <el-dialog title="转线索" :visible.sync="dialogTableVisible" width="90%" >
      <Open @change="openElect" :ids=ids  v-if="dialogTableVisible"></Open>
    </el-dialog>
    <el-dialog title="查看附件" :visible.sync="openFileList" width="500px" append-to-body>
      <el-table :data="fileList">
        <el-table-column label="文件名称" align="center" prop="fileName" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click.stop="handleView(scope.row)" title="查看"></el-button>
            <el-button size="mini" type="text" icon="el-icon-download"
              @click="handleDownload(scope.row.url, scope.row.fileName)" title="下载"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { listSeas, getSource, deleteSeas, addSeas, updateSeas, updateClass, editBusinessManager } from "@/api/highSeas/seas";
import { deptTreeSelect, userTree } from "@/api/system/user";
import FileView from "@/components/FileView/index"
import dia from "./dialog.vue"
import { download } from "@/utils/request";
import { queryFile, fileRemove } from "@/api/system/file";
import Add from "./add.vue";
import { getToken } from "../../../utils/auth";
import { getIndustryTree } from "@/api/enterprise/industry";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import MainType from "@/components/MainType/index"
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import SelectUser from "../../system/role/selectUser.vue";
import { listType } from "@/api/maintype/type";
import Operate from "../info/operate.vue";
import Open from "./open.vue";
import pdf from "vue-pdf";
import { listArea } from "@/api/area/area";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Template from "../../membertemplate/index.vue";
export default {
  name: "Seas",
  dicts: ['enterprise_nature', 'product_type', 'administrative_area', 'customer_industry', 'seas_status','belong_to_park'],
  components: {Template, Operate, dia, Add, FileView, MainType, Treeselect, SelectUser, Open, pdf },
  data() {
    return {
      //主分类
      typeCode: 'seas',
      classOpen: false,
      classificationIds: '650c44e1-b575-4b62-9d54-1ba9d1e8abb7',
      options: null,
      enterIds: [],
      userType: '1',
      industryOptions: [], // 行业选项
      industryMap: new Map(), // 缓存行业数据
      sign: '1',
      // 遮罩层
      loading: true,
      //部门下的用户列表
      userList: [],
      fileList: [],
      openFileList: false,
      //序号，传递给子组件
      index: null,
      dialogImageUrl: '',
      managerList:[
        {keyId:'430300',value:'湘潭市'},{keyId: '430321',value: '湘潭县'},{keyId: '430302',value:'雨湖区'},{keyId: '430304',value:"岳塘区"},
        {keyId:'430382',value: '韶山市'},{keyId: '430381',value: '湘乡市'},{keyId: '430100',value: '长沙市'},{keyId: '430200',value: '株洲市'}
      ],
      dialogVisiblePdf: false,
      //公海附件
      show: false,
      typeSelect: 0,
      businessCode: 'seas',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      pdfUrl: '',
      // 显示搜索条件
      showSearch: true,
      //附件展示标志位
      ImgDig: false,
      // 总条数
      total: 0,
      // 公海管理表格数据
      seasList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      pageTotal: null,
      //查看详情的弹出框
      dialogVisible: false,
      isAdminPrivate:null,//是否为机构/企业管理员
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        enterpriseName: null,
        administrativeArea: null,
        enterpriseNature: null,
        industry: null,
        classificationId: null,
        parkName:null,
        contacts:null,
        telephone:null
      },
      //公海表单，转电销使用
      dialogTableVisible: false,
      // 列信息
      columns: [
        { key: 0, label: `创建时间`, visible: true },
        { key: 1, label: `最新进展`, visible: true },
        { key: 2, label: `最新操作时间`, visible: true },
        { key: 3, label: `企业名称`, visible: true },
        { key: 4, label: `公司编号`, visible: true },
        { key: 5, label: `联系人`, visible: true },
        { key: 6, label: `联系电话`, visible: true },
        { key: 7, label: `行政区域`, visible: true },
        { key: 8, label: `企业性质`, visible: true },
        { key: 9, label: `所属行业`, visible: true },
        { key: 10, label: `开户银行`, visible: true },
        { key: 11, label: `税务号`, visible: true },
        { key: 12, label: `成立日期`, visible: true },
        { key: 13, label: `注册资金`, visible: true },
        { key: 14, label: `状态`, visible: true },
        { key: 15, label: `附件`, visible: true },
        { key: 16, label: `创建人`, visible: true },
        { key: 17, label: `开户账号`, visible: true },
      ],
      // 公海导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/highSeas/seas/importData"
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      //部门id
      deptId: null,
      innerVisible: false,
      // 企业信息表格数据
      infoList: [],
      type: 0,
      opt: 'add',
      id: '',
    };
  },
  created() {
    this.isAdminPrivate=this.$store.state.user.info.isAdmin;
    this.getList();
    this.area();
    this.getIndustryTreeData();
  },
  //监听子组件弹框的boolean值,用于关闭弹窗后，数据重新加载
  watch: {
    innerVisible: function (newValue, oldValue) {
      // 在someValue发生变化时执行的操作
      console.log('someValue changed:', newValue);
      // 调用您想要执行的方法
      this.getList();
    }
  },
  methods: {
    /** 查询公海管理列表 */
    getList() {
      this.loading = true;
      listSeas(this.queryParams).then(response => {
        this.seasList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //下载
    handleDownload(fileUrl, fileName) {
      let params = {
        resource: fileUrl
      }
      console.log("sdadsa:" + fileName)
      download("/common/download/resource", params, fileName);
    },
    // 获取行业树形数据
    getIndustryTreeData() {
      getIndustryTree().then(response => {
        this.industryOptions = this.handleIndustryData(response.data);
      });
    },
    // 处理行业数据,构建缓存
    handleIndustryData(data) {
      data.forEach(item => {
        this.industryMap.set(item.industryId, item.name);
        if (item.children && item.children.length > 0) {
          this.handleIndustryData(item.children);
        }
      });
      return data;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "highSeas/seas/export",
        {
          ...this.queryParams,
        },
        "公海导出数据" + "_" + new Date().getTime() + ".xlsx"
      );
    },
    handleView(row) {
      if (row.url != null && row.url !== '' && (row.url).indexOf('.pdf') !== -1) {
        this.handlePictureCardPreviewPdf(row.url);
      } else {
        this.handlePictureCardPreview(row.url);
      }
    },
    // 获取搜索建议的数据
    querySearch(queryString, cb) {
      const suggestions = [];
      getSource().then(res=>{
        console.log(res)
        res.forEach(data => {
          suggestions.push({ value: data });
        });
      })

      // 调用 callback 返回建议列表的数据
      cb(suggestions);
    },
    // 获取行业名称
    getIndustryName(industryId) {
      if (!industryId) return '';
      return this.industryMap.get(industryId) || '';
    },
    // 选择
    handleManagerSelect(manager) {
      if (this.queryParams.administrativeArea === manager.keyId) {
        this.queryParams.administrativeArea = null; // 再次点击取消选择
      } else {
        this.queryParams.administrativeArea = manager.keyId;
      }
      this.handleQuery(); // 触发搜索
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    handlePictureCardPreviewPdf(url) {
      this.pdfUrl = pdf.createLoadingTask(url)
      // 获取页码
      this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {
      })
      this.dialogImageUrlPdf = url;
      this.dialogVisiblePdf = true;
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.areaId,
        label: node.areaName,
        isDisabled: false,
        children: node.list && node.list.length > 0 ? node.list : 0,
      };
    },
    area() {
      listArea({}).then(response => {
        this.options = response.data;
      });
    },
    //树点击事件
    getNode(data, node, obj) {
      console.log(data)
      if (data.parentId != '00000000-0000-0000-0000-000000000000') {
        this.queryParams.classificationId = data.id
      } else {
        this.queryParams.classificationId = null
      }
      this.getList()
    },
    //序号展示
    indexMethod(index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
    },

    // 表单重置
    reset() {
      this.form = {
        enterpriseId: null,
        enterpriseName: null,
        enterpriseSource: null,
        enterpriseAbbreviation: null,
        administrativeArea: null,
        legalRepresentative: null,
        establishmentDate: null,
        enterpriseLabel: null,
        registeredCapital: null,
        industry: null,
        contacts: null,
        telephone: null,
        enterpriseAddress: null,
        businessScope: null,
        enterpriseNature: null,
        creationTime: null,
        operateTime: null,
        operateId: null,
        departmentId: null,
        departmentName: null,
        organizationId: null,
        organizationName: null,
        serialNumber: null,
        delFlag: null,
        classificationId: null,
        address: null,
        markAs: null,
        belongTo: null,
        isOut: null,
        taxId: null,
        account: null,
        accountBank: null,
        developManager: null,
        businessManager: null,
        status: null,
        createId: null,
        businessLicense: null,
        companyNo: null,
        followTime:null
      };
      this.resetForm("form");
    },
    // 多选框选中数据
    handleSelectionChangeEnter(selection) {
      this.enterId = selection.map(item => item.enterpriseId)
      this.enterName = selection.map(item => item.enterpriseName)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    //获取树节点数据
    listType() {
      listType({ typeCode: 'seas' }).then(res => {
        console.log(res);
        this.options = res.data;
      })
    },
    //转电销
    openElectric() {
      if (this.ids.length === 0) {
        this.$message.error("请选择转电销的数据");
      } else {
        this.dialogTableVisible = true;
      }
    },
    //关闭转电销对话框
    openElect(data) {
      this.dialogTableVisible = data;
      this.ids = [];
      this.getList();
    },
    closeDialog() {
      this.innerVisible = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //查看企业详情信息
    openDialog(id) {
      this.id = id;
      this.opt = "select"
      this.type = 1
      this.title = "查看";
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.open = false;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    openEnterprise() {
      console.log(this.innerVisible)
      this.innerVisible = true;
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "公海导入";
      this.upload.open = true;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.enterpriseId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.opt = "add"
      this.type = 1
      this.title = "新增";
    },
    handleDialogClose(isClosed) {
      console.log("关闭" + isClosed)
      this.innerVisible = isClosed;
    },
    /** 修改按钮操作 */
    handleUpdate(row, index) {
      this.id = row.enterpriseId || this.ids;
      console.log(this.id)
      this.opt = "edit"
      this.index = index + 1;
      this.type = 1
      this.title = "修改";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除名称为"' + row.enterpriseName + '"的数据项，相关数据也将被删除？').then(function () {
        return deleteSeas(row.enterpriseId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 修改主分类 */
    handleUpdateClass() {
      this.enterIds = this.ids;
      this.classOpen = true;
      this.listType();
    },
    editBusinessManager() {
      this.$refs.select.show();
    },
    //批量修改主分类
    submitClass() {
      const classVO = {
        enterIds: this.enterIds,
        classId: this.classificationIds
      }
      updateClass(classVO).then(res => {
        this.$message.success(res.msg)
        this.classOpen = false;
        this.getList();
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.enterpriseId != null) {
            updateSeas(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSeas(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    //取消新增或者编辑
    close(data) {
      if(data===false){
        this.type = 0
        this.open = data;
      }
      this.getList();
    },

    handleCurrentChange(row, index, column, event) {
      if (this.open===true){
        this.open=false;
        this.$nextTick(() => {
          this.$refs.operateref.selectActiveName()
        })
        this.id = row.enterpriseId;
        this.open = true;
        this.opt = 'select';
        this.index = row.index;
        this.type = 0;
      }else {
        this.open = true;
        this.id = row.enterpriseId;
        this.opt = 'select';
        this.index = row.index;
        this.type = 0;
      }
    },
    //索引初始化到对象
    tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + rowIndex + 1;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/highSeas/seas/importTemplate', {
      }, `公海管理数据.xlsx`)
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //批量修改业务经理
    selectUser(userId, userName, phone, position) {
      const params = {
        enterIds: this.ids,
        businessManagerId: userId,
        businessManagerName: userName
      };
      editBusinessManager(params).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.getList();
      });
    },
    queryUploadFile(id) {
      queryFile(id, this.businessCode).then(response => {
        this.fileList = response.data;
        console.log(this.fileList)
      });
      this.openFileList = true;
    },
  }
};
</script>
<style scoped lang="scss">
.no-multiple {

  // 隐藏多选
  ::v-deep .el-table_2_column_20 .is-center .el-table-column--selection .is-leaf .el-table__cell {
    display: none;
  }
}
.manager-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  .manager-tag {
    padding: 4px 12px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;

    &:hover {
      border-color: #409EFF;
      color: #409EFF;
    }

    &.active {
      background-color: #409EFF;
      border-color: #409EFF;
      color: #fff;
    }
  }
}
</style>
